<template>
  <div id="operSeller" class="list">
    <div class="breadcrumb">
			<Breadcrumb separator=">">
				<BreadcrumbItem to="">运营管理</BreadcrumbItem>
				<BreadcrumbItem to="/operation/seller">销售管理</BreadcrumbItem>
			</Breadcrumb>
			<div class="btns">
				<ButtonGroup>
	        <Button type="text" @click="showAdd"><i class="fa fa-plus"></i><span>添加</span></Button>
	        <Button type="text" @click="downdemo"><i class="fa fa-file"></i><span>下载模板</span></Button>
	        <Button type="text" @click="showImport"><i class="fa fa-upload"></i><span>批量导入</span></Button>
	        <Button type="text" @click="exportData"><i class="fa fa-download"></i><span>导出数据</span></Button>
	    	</ButtonGroup>
			</div>
		</div>
    <TableSearch>
      <Form :label-width="80">
        <Row :gutter="16">
          <Col :md="8">
            <FormItem label="名称">
              <Input placeholder="请输入销售名称关键字" v-model="salesName" clearable />
            </FormItem>
          </Col>
          <Col :md="8">
            <FormItem label="渠道类型">
              <Select placeholder="请选择" v-model="channel" clearable>
                <Option :value="1">个人</Option>
                <Option :value="2">中间商</Option>
              </Select>
		        </FormItem>
          </Col>
        </Row>
      </Form>
			<Button type="primary" class="search-btn" icon="search" @click="search" long>查询</Button>
		</TableSearch>

    <div class="table-content">
			<div class="table">
				<table>
					<thead>
						<th>名称</th>
						<th>渠道</th>
						<th>电话</th>
						<th>状态</th>
						<th>二维码</th>
						<th>操作</th>
					</thead>
					<tbody>
						<tr v-for="(v,i) in pageData.thisPageElements" :key="`seller-list-key-${i}`">
							<td>{{v.salesName}}</td>
							<td>{{v.channel===2?'中间商':'个人'}}</td>
							<td>{{v.phone}}</td>
							<td>{{v.status===1?'启用':'禁用'}}</td>
							<td>
                <a @click="showImage(v.qrCodeUrl)">查看</a>
              </td>
							<td class="operate">
								<a @click="doDisable(v)">{{v.status===1?'禁用':'启用'}}</a>
								<a @click="doDelete(v)">删除</a>
							</td>
						</tr>
            <tr v-if="!isLoading && pageData.totalNumberOfElements <= 0">
              <td colspan="6">暂无数据</td>
            </tr>
					</tbody>
				</table>
			</div>

			<Page :total="pageData.totalNumberOfElements" :page-size="pageData.pageSize" :current="current" @on-change="loadPage" show-total></Page>
			<Spin size="large" fix v-if="isLoading"></Spin>
		</div>

    <Modal v-model="modal.show" :title="modal.title" width="500">
      <Form :label-width="80" :model="form" ref="form" :rules="rules">
        <FormItem label="名称" prop="salesName">
        	<Input placeholder="请输入销售员姓名" v-model="form.salesName" :maxlength="20"></Input>
   			</FormItem>
        <FormItem label="渠道" prop="channel">
          <Select placeholder="请选择" v-model="form.channel">
            <Option :value="1">个人</Option>
            <Option :value="2">中间商</Option>
          </Select>
   			</FormItem>
        <FormItem label="电话" prop="phone">
        	<Input placeholder="请输入电话号码" v-model="form.phone" :maxlength="20"></Input>
   			</FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="colseModal">取消</Button>
        <Button type="primary" :loading="isModalLoading" @click="submit">保存</Button>
      </div>
    </Modal>

    <ImportModal v-model="importModal.show" :submit-path="importModal.path" @on-success="hideImport"></ImportModal>
    <Modal v-model="imgmodal.show" title="查看二维码" footerHide :width="240">
      <img :src="imgmodal.img" />
    </Modal>
  </div>
</template>

<script>
  import {mapState,mapActions} from 'vuex'
  import moment                from 'moment'
  import {post}                from '@/util/request'
  import {download}  					 from '@/util/request'

  export default {
    data(){
      return {
        current:1,
        salesName:'',
        channel:'',
        isModalLoading:false,

        modal:{
          show:false,
          title:'新增销售员'
        },
        form:{enable:1},
        submitForm:{},
        rules:{
          salesName:{required:true, message:'销售员姓名必填', trigger:'blur'},
          channel:{required:true, type:'number', message:'渠道必填', trigger:'change'},
          phone:{required:true, pattern:/^1[3|4|5|7|8][0-9]{9}$/,message:'必须是有效手机号码',trigger:'blur'}
        },
        imgmodal:{
          show:false,
          img:''
        },

        importModal:{
          show:false,
          path:'/sales/upload'
        }
      };
    },
    computed:{
      ...mapState('operation/operSeller',['pageData','isLoading']),
      empopts(){
        return {isedit:this.modalIsEdit,title:this.modalTitle};
      }
    },
    methods:{
      moment,
      ...mapActions('operation/operSeller',['reload','disableSeller','ableSeller','deleteSeller']),
      showImage(url){
        this.imgmodal.img = url;
        this.imgmodal.show = true;
      },
      downdemo(){
				window.location.href="/static/template/saller_model.xlsx"
			},
      search(){
        this.submitForm = {salesName:this.salesName,channel:this.channel};
        this.loadPage(1);
      },
      loadPage(e){
        this.current = e;
        this.reload({pageNum:this.current,...this.submitForm});
      },
      colseModal(){
        this.$refs.form.resetFields();
        this.modal.show = false;
      },
      showAdd(){
        this.modal.title = '新增销售员';
        this.modal.show = true;
      },
      async submit(){
        let v = await this.$refs.form.validate();
        if (v){
          this.submitAdd();
        }
      },
      async submitAdd(){
        this.isModalLoading = true;
  			let res = await post("/sales/add",this.form);
        this.isModalLoading = false;
        if (res.data.success){
          this.$Message.success('保存成功');
          this.colseModal();
        }else{
          this.$Message.error(res.data.msg);
        }
        this.loadPage(1);
      },
      doDisable(v){
        let str = v.status === 1 ? '禁用':'启用';
        this.$Modal.confirm({
          title: `${str}销售员`,
          content: `是否将销售员“${v.salesName}”${str}？`,
          loading: true,
          onOk:async ()=>{
            let res;
            if(str==='禁用'){
              res = await this.disableSeller({id:v.id});
            }else{
              res = await this.ableSeller({id:v.id});
            }
          	if(res.success){
          		this.$Modal.remove();
              this.deleteLoadPage();
          		this.$Message.success('操作成功');
						}else{
							this.$Modal.remove();
							this.$Message.error(res.msg);
						}
          }
        });
      },
      deleteLoadPage(){
				let total = this.pageData.totalNumberOfElements - 1;
				let pageSize = parseInt(total / this.pageData.pageSize) + (total % this.pageData.pageSize > 0 ? 1 : 0);
				if (this.current > 1 && this.current > pageSize) {
					this.current--;
				}
				this.loadPage(this.current);
			},
      doDelete(v){
        this.$Modal.confirm({
          title: '删除销售员',
          content: `是否将账户“${v.salesName}”删除？`,
          loading: true,
          onOk:async ()=>{
            let res = await this.deleteSeller({id:v.id});
            if(res.success){
              this.$Modal.remove();
              this.loadPage(this.current);
              this.$Message.success('删除成功');
            }else{
              this.$Modal.remove();
              this.$Message.error(res.msg);
            }
          }
        });
      },
      exportData(){
        download('/sales/export',this.submitForm);
      },
      changeDrModal(){
				this.drModal = !this.drModal;
				if(!this.drModal){
					this.isRes = false;
					this.drRes = {};
					this.drForm = {};
					this.fileName = '';
					this.drerror = "";
				}
			},
      showImport(){
        this.importModal.show = true;
        //this.loadTemp();
      },
      hideImport(){
        this.importModal.show = false;
        this.search();
      }
    }
  }
</script>
